<template>
    <div class="brd-container">
        <div class="brd-descr" :style="{width: containerWidth+'px'}"><span>前面板</span></div>
        <a-card id="front-brd-chart" class="brd-chart" :style="{width: containerWidth+'px', height: containerHeight+'px'}"></a-card>
        <div class="brd-descr" :style="{width: containerWidth+'px', marginTop: '11px'}"><span>后面板</span></div>
        <a-card id="rear-brd-chart" class="brd-chart" :style="{width: containerWidth+'px', height: containerHeight+'px'}"></a-card>
    </div>
</template>

<script>
    import * as BC from "@/views/rt_boards/common";
    import SLOT from "@/views/rt_boards/panels/SLOT";
    import FAN from "@/views/rt_boards/panels/FAN";
    import AR2240 from "@/views/rt_boards/panels/AR2240";

    export default {
        name: "AR2240",
        props: {
            onMouseOverPort: {
                type: Function,
                default: undefined
            },
            onMouseOutPort: {
                type: Function,
                default: undefined
            },
            onClickPort: {
                type: Function,
                default: undefined
            },
            subBoards: {
                type: Array,
                default: () => ([])
            },
        },
        data() {
            return {
                boxWidth: AR2240.w,
                boxHeight: AR2240.h,
                containerWidth: 0,
                containerHeight: 0,
                chartScale: 0.75,
                brdSet: {},
                frontPanel: {},
                frontPanelChart: null,
                rearPanel: {},
                rearPanelChart: null,
            }
        },
        created() {
            this.containerWidth = (this.boxWidth) * this.chartScale;
            this.containerHeight = (this.boxHeight) * this.chartScale;
        },
        mounted() {
            // 加载单板
            this.loadBrdSet();
        },
        methods: {
            loadBrdSet() {
                let that = this;
                for (let i = 0; i < that.subBoards.length; i++) {
                    let brd = that.subBoards[i];
                    let brdFilename = BC.getBrdFilename(brd.name);
                    import(`@/views/rt_boards/panels/${brdFilename}`).then(comp => {
                        that.brdSet[brd.name] = comp.default;
                    }).catch(error => {
                        console.error("Board " + brd.name + " is not exist!");
                    }).finally(() => {
                        if (i >= (that.subBoards.length - 1)) {
                            that.draw();
                        }
                    });
                }
            },
            draw() {
                let frontBrdStartX = 0;
                let frontBrdStartY = 0;
                let rearBrdStartX = 0;
                let rearBrdStartY = 0;
                let rearLeftOffsetX = rearBrdStartX + BC.FAN_W;

                // TODO: 1. 构建槽位布局
                let slotPos = {
                    1: {x: rearLeftOffsetX + BC.SIC_W * 3, y: rearBrdStartY},
                    2: {x: rearLeftOffsetX + BC.SIC_W * 2, y: rearBrdStartY},
                    3: {x: rearLeftOffsetX + BC.SIC_W, y: rearBrdStartY},
                    4: {x: rearLeftOffsetX, y: rearBrdStartY},
                    5: {x: rearLeftOffsetX + BC.WSIC_W, y: rearBrdStartY + BC.SIC_H},
                    6: {x: rearLeftOffsetX, y: rearBrdStartY + BC.SIC_H},
                    7: {x: rearLeftOffsetX + BC.WSIC_W, y: rearBrdStartY + BC.SIC_H * 2},
                    8: {x: rearLeftOffsetX, y: rearBrdStartY + BC.SIC_H * 2},
                    9: {x: frontBrdStartX + BC.XSIC_W, y: frontBrdStartY},
                    10: {x: frontBrdStartX, y: frontBrdStartY},
                    11: {x: frontBrdStartX, y: frontBrdStartY + BC.XSIC_H},
                };

                // TODO: 2. 构建机框
                // 前面板机框
                this.frontPanel = {
                    type: 'group',
                    left: 0,
                    top: 0,
                    scaleX: this.chartScale,
                    scaleY: this.chartScale,
                    children: [
                        // 风扇板
                        {
                            type: 'image',
                            left: BC.WSIC_W * 2,
                            top: frontBrdStartY,
                            z: -10,
                            bounding: 'raw',
                            style: {
                                image: FAN["AR2200_SERIES"].img(),
                                width: FAN["AR2200_SERIES"].w,
                                height: FAN["AR2200_SERIES"].h
                            }
                        },
                        // 前面板挡板
                        SLOT["XSIC"].panel(slotPos[9].x, slotPos[9].y, 9),
                        SLOT["XSIC"].panel(slotPos[10].x, slotPos[10].y, 10),
                    ]
                };
                // 后面板机框
                this.rearPanel = {
                    type: 'group',
                    left: 0,
                    top: 0,
                    scaleX: this.chartScale,
                    scaleY: this.chartScale,
                    children: [
                        // 左侧面板
                        {
                            type: 'image',
                            left: rearBrdStartX,
                            top: rearBrdStartY,
                            z: -10,
                            bounding: 'raw',
                            style: {
                                image: AR2240.rearLeftImg(),
                                width: AR2240.rearLeftWidth,
                                height: AR2240.rearLeftHeight
                            }
                        },
                        // 后面板挡板
                        SLOT["SIC"].panel(slotPos[1].x, slotPos[1].y, 1),
                        SLOT["SIC"].panel(slotPos[2].x, slotPos[2].y, 2),
                        SLOT["SIC"].panel(slotPos[3].x, slotPos[3].y, 3),
                        SLOT["SIC"].panel(slotPos[4].x, slotPos[4].y, 4),
                        SLOT["WSIC"].panel(slotPos[5].x, slotPos[5].y, 5),
                        SLOT["WSIC"].panel(slotPos[6].x, slotPos[6].y, 6),
                        SLOT["XSIC"].panel(slotPos[7].x, slotPos[7].y, 7),
                        SLOT["XSIC"].panel(slotPos[8].x, slotPos[8].y, 8),
                    ]
                };

                // TODO: 3. 构建前/后面板单板
                let boards = this.subBoards;
                for (let i = 0; i < boards.length; i++) {
                    let slot = boards[i].slot;
                    let brdName = boards[i].name;
                    let panel;
                    if (this.brdSet[brdName]) {
                        // AR2240 机框槽位小于 9 的为后面板
                        panel = (slot < 9) ? this.rearPanel : this.frontPanel;
                        panel.children.push(this.brdSet[brdName].panel(slotPos[slot].x, slotPos[slot].y, slot, {
                            onMouseOverPort: this.onMouseOverPort,
                            onMouseOutPort: this.onMouseOutPort,
                            onClickPort: this.onClickPort,
                        }));
                    }
                }

                // TODO: 4. 画设备
                this.frontPanelChart = this.$echarts.init(document.getElementById("front-brd-chart"));
                this.frontPanelChart.setOption({
                    graphic: [this.frontPanel]
                });
                this.rearPanelChart = this.$echarts.init(document.getElementById("rear-brd-chart"));
                this.rearPanelChart.setOption({
                    graphic: [this.rearPanel]
                });

                // TODO: ONLY for DEBUGGING
                this.onlyForDebug();
            },
            /**
             * 更新单板端口
             * For Example: this.updatePort("GE 2/0/1", BC.LED_ALL, BC.LED_GRAY);
             */
            updatePort(portName, ledPos, ledColor) {
                // 根据端口获取槽位号
                let slot = BC.getPortSlot(portName);
                if ((slot === undefined)||(slot === null)) {
                    return;
                }

                // AR2240 槽位号为 0 的为 SRU 主板
                let panel, panelChart;
                if (slot === 0) {
                    panel = this.frontPanel;
                    panelChart = this.frontPanelChart;
                } else {
                    panel = this.rearPanel;
                    panelChart = this.rearPanelChart;
                }

                // 查找到槽位号相关的单板，并更新单板上端口
                let panelSet = panel.children;
                for (let i = 0; i < panelSet.length; i++) {
                    let slotPanel = panelSet[i];
                    if (slotPanel.slot === slot) {
                        slotPanel.updatePort(portName, ledPos, ledColor);
                        panelChart.setOption({
                            graphic: [panel]
                        });
                        break;
                    }
                }
            },

            // TODO: ONLY for DEBUGGING
            onlyForDebug() {
                let that = this;
                let flag = true;
                setInterval(function () {
                    if (flag) {
                        flag = false;
                        that.updatePort("GE 2/0/0", BC.LED_ALL, BC.LED_GRAY);
                        that.updatePort("GE 0/0/1", BC.LED_ALL, BC.LED_GRAY);
                    } else {
                        flag = true;
                        that.updatePort("GE 2/0/0", BC.LED_LEFT, BC.LED_YELLOW);
                        that.updatePort("GE 2/0/0", BC.LED_RIGHT, BC.LED_GREEN);
                        that.updatePort("GE 0/0/1", BC.LED_LEFT, BC.LED_YELLOW);
                        that.updatePort("GE 0/0/1", BC.LED_RIGHT, BC.LED_GREEN);
                    }
                }, 1000);
            },
        }
    }
</script>

<style lang="less" scoped>
    .brd-descr {
        text-align: center;
        font-size: 18px;
    };
    .brd-chart {
        background: #aaa;
        text-align: center;
        border: none;
    }
</style>